<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="100" height="100"></canvas>
  <video id="video" width="800" height="800" controls="controls">
    <source src="video/test.mp4" type="video/mp4">
  </video>
  <script>
    const canvasEle = document.getElementById('canvas')
    const videoEle = document.getElementById('video')
    const ctx = canvasEle.getContext('2d')
    ctx.rect(0, 0, 100, 100)
    let intervalId
    videoEle.onplay = function () {
      console.log('video', video)
      intervalId = setInterval(() => {
        ctx.clearRect(0, 0, 100, 100)
        ctx.drawImage(videoEle, 0, 0, 100, 100)
      }, 16);
    }
    videoEle.onpause = function () {
      clearInterval(intervalId)
    }
  </script>
</body>

</html>